<!--
 * @Author: your name
 * @Date: 2021-02-07 16:41:01
 * @LastEditTime: 2021-02-23 20:53:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \awesomepos\src\components\Pos.vue
-->
<template>
  <div class="main">
    <left-nav></left-nav>
    <div>
      <el-row>
        <el-col :span="7">
          <div class="grid-content bg-purple" id="order_list">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="客户点餐" name="first">
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column fixed prop="trade_name" label="商品名称" width="150">
                  </el-table-column>
                  <el-table-column prop="true_price" label="价格" width="80">
                  </el-table-column>
                  <el-table-column prop="count" label="数量" width="100">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        @click="handleClick(scope.row)"
                        type="text"
                        size="small"
                        >查看</el-button
                      >
                      <el-button type="text" size="small">编辑</el-button>
                      <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                      <el-button type="text" size="small" @click="reduceOrderList(scope.row)">减少</el-button>
                      <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <p class="total">总数：{{ totalCount }} &nbsp;&nbsp;&nbsp;&nbsp; 总价格：{{ totalMoney }}</p>
                <el-row>
                  <el-button type="danger" size="mini" @click="delAllGoods()">清空</el-button>
                  <el-button type="success" size="mini" @click="checkout()">结账</el-button>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="账务挂单" name="second">挂 单</el-tab-pane>
              <el-tab-pane label="美团外卖" name="third">外 卖</el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="15">
          <div class="grid-content bg-purple ofen-goods">
              <div class="title">常用商品</div>
              <div class="often-goods-list">
                    <ul>
                        <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                            <span>{{ goods.trade_name }}</span>
                            <span class="o-price">￥{{ goods.true_price }}元</span>
                        </li>
                    </ul>
              </div>
          </div>
          <div class="goods-type">
              <el-tabs v-model="typeName" @tab-click="typeClick">
              <el-tab-pane label="" name="first" class="tab">
                 <ul class="cookList">
                    <li v-for="goods in cateGoodArr" @click="addOrderList(goods)">
                        <span class="foodImg"><img :src="goods.cover" width="40%"></span>
                        <span class="foodName">{{ goods.trade_name }}</span>
                        <span class="foodPrice">￥{{ goods.true_price }}元</span>
                    </li> 
                </ul>
              </el-tab-pane>
             <el-tab-pane v-for = "item in cateArr" :label="item.private_class_name" :value="item.private_one_class"></el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import leftNav from "@/components/common/leftNav";
import axios from 'axios';
export default {
  name: "Pos",
  data() {
    return {
      activeName: "first",
      typeName:"first",
      tableData:[],
      oftenGoods:[],
      type0Goods:[],
      cateArr : [],
      cate_id:'',
      cateGoodArr : [],
      totalCount : 0,
      totalMoney : 0
    };
  },
  components: {
    leftNav,
  },
  mounted() {
    //获取当前窗口的高度
    let orderHeight = document.body.clientHeight;
    document.getElementById("order_list").style.height = orderHeight + "px";
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    typeClick(tab,event){
        
    },
    //添加订单列表的方法
    addOrderList(goods){
       
        let isHave = false;
        //判断这个商品是不是存在于订单列表中
        for(let i = 0 ; i < this.tableData.length ; i++){
            if(this.tableData[i].id == goods.id){
                isHave = true; //存在
            }
        }
        //根据isHave的值判断订单列表中是否存在此商品
        //证明存在此商品
        if(isHave){
            //存在就进行数量增加
            let arr = this.tableData.filter(o => o.id == goods.id);
            arr[0].count++;
        }else{
          //如果不存在就推进数组
          let newGoods = {id:goods.id,trade_name:goods.trade_name,true_price:goods.true_price,count:1};
          this.tableData.push(newGoods);
        }
        this.getAllMoney();
    },
    reduceOrderList(goods){
        this.totalCount = 0;
        this.totalMoney = 0;
        let arr = this.tableData.filter((o) => o.id == goods.id);
        if(arr[0].count == 1){
            this.$message.error('请至少保留一个');
            return false;
        }
        arr[0].count--;
    },
    //删除单个产品
    delSingleGoods(goods){
        this.tableData = this.tableData.filter((o) => o.id != goods.id);
        this.$message({
          message : '删除成功',
          type : 'success'
        });
        this.getAllMoney();
    },
  //计算总数和总价格
    getAllMoney(){
      this.totalCount = 0;
      this.totalMoney = 0;
      this.tableData.forEach((element) => {
          this.totalCount += element.count;
          this.totalMoney += parseFloat(element.true_price * element.count);
      });
    },
    //删除所有商品
    delAllGoods(){
      this.totalCount = 0;
      this.totalMoney = 0;
      this.tableData = [];
      this.$message({
        message : '删除成功!',
        type:'success'
      });
    },
    //对产品进行结账操作
    checkout(){
      if(this.totalCount == 0){
          this.$message.error('请选择下单的菜品');
          return false;
      }
      let param = new URLSearchParams();
      param.append('postData',JSON.stringify(this.tableData));
      axios.post('http://localhost/lh_vue/awesomepos/php/checkout.php',param,
      ).then(response => {
        if(response.data.status == 1){
          this.$message({
            message : response.data.msg,
            type : 'success'
         });
         this.totalCount = 0;
         this.totalMoney = 0;
         this.tableData = [];
        }else{
          this.$message.error(response.data.msg);
        }
      });
     
    }
  },
  created() {
      axios.get('http://localhost/lh_vue/awesomepos/php/goods.php')
      .then(response => {
          this.oftenGoods = response.data['GoodsList'];
          this.cateArr = response.data['cate_list'];
          this.cate_id = response.data['cate_list'][0].private_one_class;
      }).catch(error => {
          console.log(error);
          alert('网络错误,不能访问');
      })
      axios.get('http://localhost/lh_vue/awesomepos/php/cate_goods.php?cate_id='+ '106')
      .then(response => {
        let goodArr = response.data.cate_goods;
        goodArr.forEach(element => {
            element.cover = 'https://www.xiaobangcai.com/' + element.cover;
        });
          this.cateGoodArr = goodArr;
      }).catch(error => {
          console.log(error)
          alert('网络错误,不能访问');
      })
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  float:left;
  height: 100%;
  margin-left: 5px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
#order_list {
  border-right: 1px dashed #ccc;
  background: #fcfdfd;
}
.title{
  height:20px;
  border-bottom:1px solid #D3DCE6;
  background-color:#F9FAFC;
  padding:10px;
  text-align:left;
}
.often-goods-list{
  min-height:220px;
}
.often-goods-list ul li{
  list-style-type:none;
  float:left;
  padding:10px;
  border:1px solid #E5E9F2;
  margin:10px;
  cursor: pointer;
  box-shadow:2px 2px 3px #ccc;
}
.often-goods-list ul li span{
  font-size:15px;
}
.o-price{
  color:orange;
  font-size:14px;
}
.goods-type{
  width:100%;
  float:left;
  padding:0 0 0 10px;
}
.cookList{
  list-style-type:none;
}
.cookList li{
  width:20%;
  border:1px solid #ccc;
  float:left;
  margin:15px;
  background:#ffffff;
  padding:2px;
  box-shadow:2px 2px 3px #ccc;
}
.foodImg{
  width:85px;
}
.foodImg img{
  width:85px;
  float:left;
}
.foodName{
  font-size:16px;
  margin-left:8px;
  color:brown;
  line-height:5%;
  float:right;
  padding:25px 2px 20px 0;
}
.foodPrice{
  color:gold;
  font-weight:bold;
}
.total{
  font-size: 15px;
  color: red;
}
</style>
